<template>
  <div class="nav-bar-btn-container">

    <el-date-picker
        v-model="dataRange"
        class="data-btn"
        end-placeholder="结束日期"
        range-separator="至"
        start-placeholder="开始日期"
        type="datetimerange"
        value-format="yyyy-MM-dd"
    />


    <el-input type="text" v-model.trim="content" placeholder="请输入搜索内容"

    />

    <el-button type="primary" @click="handleSearch" plain>搜索</el-button>


    <export-btn
        v-if="xlsxName"
        :sheet-header="sheetHeader"
        :sheet-list="sheetList"
        :xlsx-name="xlsxName"
        class="export-btn"
    />

  </div>

</template>

<script>

export default {
  props: ["xlsxName", "sheetList", "sheetHeader", "noSearch"],
  components: {
    "export-btn": () => import("./exportXlsx"),
  },
  data () {
    return {
      content: "",
      dataRange: "",
    };
  },
  methods: {
    handleSearch () {
      const content = this.content;
      const dataRange = this.dataRange;
      this.$emit("search-method", {
        content,
        dataRange,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.nav-bar-btn-container {
  @media screen and (min-width: 900px) {
    display: flex;
    justify-content: center;
    align-content: center;
  }
  @media screen and (max-width: 900px) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    .data-btn {
      width: 100%;
    }

    .export-btn {
      width: 100%;
    }
  }

}


</style>
